import React, { useEffect, useState } from 'react';
import { FlatList, View, Text, StyleSheet } from 'react-native';
import { connect } from 'react-redux';
import Carousel, { sideHeight } from './carousel'
import Guess from './guess'
import ChannelItem from './channel-item';

import { LogBox } from 'react-native';

LogBox.ignoreLogs([
    'Non-serializable values were found in the navigation state',
]);
const mapStateToProps = (state, { route }) => {
    const { namespace } = route.params;
    const modelState = state[namespace];
    return {
        namespace,
        carousels: modelState.carousels,
        channels: modelState.channels,
        hasMore: modelState.pagination.hasMore,
        gradientVisible: modelState.gradientVisible,
        loading: state.loading.effects[namespace + '/fetchChannels'],
    }
}

const connector = connect(mapStateToProps);

function Home(props) {
    const { dispatch, carousels, channels, navigation } = props;
    const [refreshing, setrefreshing] = useState(false);

    useEffect(() => {
        dispatch({
            type: 'home/fetchCarousels'
        })
        dispatch({
            type: 'home/fetchChannels'
        })
    }, [])

    const goAlbum = (data) => {
        console.log('goAlbum', data)
        navigation.navigate("Album", { item: data });
    };
    const renderItem = ({ item }) => {
        return <ChannelItem data={item} onPress={goAlbum} />;
    }
    const header = () => {
        return <>
            <Carousel data={carousels} />
            <View style={styles.background}>
                <Guess goAlbum={goAlbum} />
            </View>
        </>
    }
    const onScroll = ({ nativeEvent }) => {
        const offsetY = nativeEvent.contentOffset.y;
        let newGradientVisible = offsetY < sideHeight;
        const { dispatch, gradientVisible, namespace } = props;
        if (gradientVisible !== newGradientVisible) {
            dispatch({
                type: namespace + '/setState',
                payload: {
                    gradientVisible: newGradientVisible,
                }
            })
        }

    }
    const keyExtractor = (item) => {
        return item.id
    }

    const onRefresh = () => {
        setrefreshing(true)
        // 2. 获取数据
        const { dispatch } = props;
        dispatch({
            type: 'home/fetchChannels',
            callback: () => {
                // 3. 修改刷新状态为false
                setrefreshing(false)
            }
        });
    }

    const onEndReached = () => {
        const { dispatch, loading, hasMore, namespace } = props;
        if (loading || !hasMore) return;
        console.log('--加载更多')
        dispatch({
            type: namespace + '/fetchChannels',
            payload: {
                loadMore: true,
            }
        });
    }

    const footer = () => {
        const { hasMore, loading, channels } = props;
        if (!hasMore) {
            return (
                <View style={styles.end}>
                    <Text>--我是有底线的--</Text>
                </View>
            )
        }
        if (loading && hasMore && channels.length > 0) {
            return (
                <View style={styles.loading}>
                    <Text>正在加载中。。。</Text>
                </View>
            )
        }
    }

    const empty = () => {
        const { loading } = props;
        if (loading) return;
        return (
            <View style={styles.empty}>
                <Text>暂无数据</Text>
            </View>
        )
    }
    return (
        <FlatList
            ListHeaderComponent={header()}
            ListFooterComponent={footer()}
            ListEmptyComponent={empty()}
            data={channels}
            renderItem={renderItem}
            keyExtractor={keyExtractor}
            onRefresh={onRefresh}
            refreshing={refreshing}
            onEndReached={onEndReached}
            onScroll={onScroll}
        >
        </FlatList>
    )
}

const styles = StyleSheet.create({
    end: {
        alignItems: 'center',
        paddingVertical: 10,
    },
    loading: {
        alignItems: 'center',
        paddingVertical: 10,
    },
    empty: {
        alignItems: 'center',
        paddingVertical: 100,
    },
    background: {
        backgroundColor: '#fff',
    }
})

export default connector(Home)